<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="toplineBox mb-10">
          <div class="toplineBox-left">
            <el-input v-model="formEdit.title" placeholder="填写问卷标题" size="small" class="w-140 mr-10"></el-input>
            <el-select v-model="formEdit.status" placeholder="选择状态" size="small" class="w-140 mr-10">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in sectionList"
                         :key="index"></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
            <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
          </div>
          <p class="numberline toplineBox-right">总{{ page.total }}条</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <!--            <el-table-column-->
            <!--                prop="id"-->
            <!--                width="60"-->
            <!--                label="ID">-->
            <!--            </el-table-column>-->
            <el-table-column
                prop="title"
                label="问卷标题">
            </el-table-column>
            <el-table-column
                label="发布人"
                width="120"
                :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-if="scope.row.user">{{ scope.row.user.realname }}</span>
                <span v-else class="c-danger">无数据</span>
              </template>
            </el-table-column>
            <el-table-column
                label="问卷范围">
              <template slot-scope="scope">
                <span v-if="scope.row.user_ids">
                  <span v-if="scope.row.user_ids.length">特定职工</span>
                </span>
                <span v-else>
                  全校职工
                </span>
              </template>
            </el-table-column>
            <el-table-column
                label="问卷人数"
                width="80">
              <template slot-scope="scope">
                {{ scope.row.count }}
              </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                width="110"
                label="发布时间">
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="有效时间"
                width="120">
              <template slot-scope="scope">
                <div class="timeline" @click="showEditTime(scope.row)">
                  <p>{{ scope.row.start_time }}</p>
                  <p>至</p>
                  <p>{{ scope.row.end_time }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                width="80"
                label="状态">
              <template slot-scope="scope">
                <!--// 0 未填写 1 已填写 -->
                <span v-if="scope.row.status==0" class="c-danger">未填写</span>
                <span v-if="scope.row.status==1" class="c-success">已填写</span>
                <span v-if="scope.row.status==2" class="c-success">已过期</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="300">
              <template slot-scope="scope">
                <!--<el-button size="small" @click="detelTearch(scope.row.id)">签名详情</el-button>-->
                <el-button size="mini" @click="gotoDetail(scope.row.id)">问卷报告</el-button>
                <el-button size="mini" @click="detailId=scope.row.id,signatureVisible=true">补签问卷</el-button>
                <el-button size="mini" @click="detailId=scope.row.id,printVisible=true" v-if="scope.row.status==1">
                  打印存档
                </el-button>
                <el-button type="danger" size="small" @click="handleDetel(scope.$index)" plain
                           v-if="userInfo.id==1">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <myQuestionDetail :visible.sync="myDetailVisible" :detailId="detailId" @InitFn="InitFn"></myQuestionDetail>
    <signature :visible.sync="signatureVisible" @signFn="signFn"></signature>
    <printQuestion :visible.sync="printVisible" :detailId="detailId"></printQuestion>
    <editTime :visible.sync="editTimeVisible" :questionData="questionData" typeline="2" @InitFn="InitFn"></editTime>
  </div>
</template>

<script>
import {pagination, tableoption, dayCheck} from '@/utils/util.js'
import myQuestionDetail from "./components/myQuestionDetail";
import {questionnaire_updata_sign} from "@/api/admin/questionTeach"
import {mapGetters} from "vuex";
import printQuestion from "./components/printQuestion";
import editTime from "../questionnaire/components/editTime";

export default {
  components: {
    myQuestionDetail,
    printQuestion,
    editTime
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      signatureVisible: false,
      printVisible: false,
      codetype: 2, // 1 通知 2 问卷
      handleSelection: [],
      arryList: [], // 页面数据列表
      // 搜索设置
      titlesearch: '', // 搜索名称
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      sectionList: [
        {
          name: '已处理',
          id: 1
        },
        {
          name: '未处理',
          id: 0
        }
      ],
      formEdit: {
        title: '',
        status: ''
      },
      myDetailVisible: false,
      detailId: 0,
      questionData: null,
      editTimeVisible: false
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.formEdit.p = this.page.pageindex
      this.$post(this.api.questionnaire_inside_myindex, this.formEdit).then((response) => {
        if (response.code === 0) {
          let array_ = []
          for (let item of response.list.data) {
            // console.log(dayCheck(response.list.data[i].end_time.split(' ')[0]))
            item.create_time = item.create_time.split(' ')[0]
            item.end_time = item.end_time.split(' ')[0]
            item.start_time = item.start_time.split(' ')[0]
            array_.push(item)
          }
          this.arryList = array_
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    searchFn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    checkIdCard(option) {
      this.editId = option || ''
      this.addclassVisible = true
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.formEdit = {
        title: '',
        status: ''
      }
      this.InitFn()
    },
    addStudent() {
      this.addVisible = true
    },
    gotoDetail(id) {
      this.detailId = id
      this.myDetailVisible = true
      // this.$router.push('questionTeachermyDetail?editId=' + id)
    },
    detelTearch(id) {
      this.$router.push('questionTeachermyDetail?editId=' + id)
    },
    signFn(option) {
      questionnaire_updata_sign({id: this.detailId, pic: option.data}).then(res => {
        console.log('res:', res)
        if (!res.code) {
          this.signatureVisible = false
          this.$message.success('补签成功')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    detelfn(id, index) {
      this.$post(this.admin_questionnaire_delete, {id: id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    checkUserList(index) {
      this.$router.push('questionuserlist?id=' + this.arryList[index].id)
    },
    handleDetel(index) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    detelRespon(index) {
      this.$post(this.api.questionnaire_inside_delete, {id: this.arryList[index].id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    showEditTime(row) {
      this.questionData = JSON.parse(JSON.stringify({
        id: row.id,
        start_time: row.start_time.split(' ')[0],
        end_time: row.end_time.split(' ')[0],
      }))
      this.editTimeVisible = true
    }
  },
  mounted() {
  },
}
</script>
<style>
.timeline p:nth-child(2) {
  font-size: 12px;
  height: 10px;
  line-height: 10px;
  color: #999;
}

.timeline:hover {
  text-decoration: underline;
  color: #006dcd;

}
</style>
